<template>
  <div>
    <div class="title">
      <span>全部机构</span>
      <div>
        <el-button type="primary" @click="add">新增机构</el-button>
        <el-button icon="el-icon-refresh" @click="refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <div class="leftitem">
            <div class="block">
              <el-date-picker v-model="storesinfo.stardate" type="datetime" placeholder="提交起始时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
              <el-date-picker v-model="storesinfo.enddate" type="datetime" placeholder="提交结束时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </div>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightitem">
            <el-input class="merchants" v-model.trim="storesinfo.channelno" placeholder="机构名称/机构号" @keyup.enter.native="soso"></el-input>
          </div>
          <div class="rightitem">
            <el-button icon="el-icon-search" type="primary" @click="soso" :disabled="isDisable">搜索</el-button>
            <el-button icon="el-icon-refresh" type="primary" @click="reset">重置</el-button>
          </div>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="channellistarr"
          tooltip-effect="dark"
          style="width: 100%"
          :loading="loading" 
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
           <el-table-column type="index" align="center" width='50' label="序号"></el-table-column>
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="instNo" align="center" label="机构号"></el-table-column>
          <el-table-column prop="instName" align="center" label="机构名称"></el-table-column>
          <el-table-column prop="token" align="center" width="300" label="key"></el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
          <el-table-column prop="payNotifyUrl" align="center" label="支付回调地址"></el-table-column>
          <el-table-column prop="mchNotifyUrl" align="center" label="商户回调地址"></el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button v-if="scope.row.limitType == 1" type="text" size="small" @click="jumpchanneldetails(scope.row)">详情</el-button>
              <el-button type="text" size="small" @click="alter(scope.row)">修改</el-button>
              <el-button type="text" size="small" @click="limitbtn(scope.row)">开通限额</el-button>
              <el-button type="text" size="small" @click="deleteAgency(scope.row)">注销</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-sizes="[10,20,30,40,50]"
            :page-size='cur_size'
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
          ></el-pagination>
        </div>
      </div>
      <br>
      <br>

      <!-- 新增机构 -->
      <el-dialog v-dialogDrag title="新增机构" :visible.sync="visible" width="30%" :close-on-click-modal = "false">
        <el-form
          :model="addchannel"
          status-icon
          ref="addchannel"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item :required="true" label="机构类别" >
            <el-select class="select-input" v-model="addchannel.category" placeholder="请选择">
              <el-option keys="1" label="平台" value="1"></el-option>
              <el-option keys="1" label="第三方" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :required="true" label="机构名称">
            <el-input type="text" v-model.trim="addchannel.instName" autocomplete="off">{{addchannel.instName}}</el-input>
          </el-form-item>
          <el-form-item  label="支付回调地址">
            <el-input type="text" v-model.trim="addchannel.payNotifyUrl" autocomplete="off">{{addchannel.payNotifyUrl}}</el-input>
          </el-form-item>
          <el-form-item  label="商户回调地址">
            <el-input type="text" v-model.trim="addchannel.mchNotifyUrl" autocomplete="off">{{addchannel.mchNotifyUrl}}</el-input>
          </el-form-item>
          <el-form-item v-if="addchannel.category == 2" label="机构角色类型">
            <el-select class="select-input" v-model="addchannel.role" placeholder="请选择" @change="rolename">
              <el-option keys="5" label="商户" value="5"></el-option>
              <el-option keys="5" label="平台" value="1"></el-option>
              <el-option keys="2" label="一级服务商" value="2"></el-option>
              <el-option keys="3" label="二级服务商" value="3"></el-option>
              <el-option keys="4" label="业态" value="4"></el-option>
            </el-select>
           <div v-if="addchannel.role == 1">
             <el-select style="width:75%;margin-top:10px"
              v-model.trim="value9"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              @change="pintaichange">
              <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
           </div>
            <div v-if="addchannel.role != 1" class="listinput">
              <!-- <el-input type="text" style="margin-top:10px" :placeholder="addchannel.rolename" v-model="keywords" @keyup.enter.native="getSelects()">{{keywords}}</el-input>
              <div class="list" v-show="keywordsbox">
                <ul>
                  <li @click="Btnkey(value)" v-for="(value, index) in keywordsarr" :key="index" :fid="value.fid" :fname="value.fname">{{value.fname}}</li>
                </ul>
              </div> -->
              <el-autocomplete
              style="margin-top:10px"
                v-if="addchannel.role!= 1"
                class="inline-input"
                v-model.trim="value10"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
                :debounce="500"
              ></el-autocomplete>
            </div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <!-- @click="visible = false" -->
          <el-button type="primary" @click="addchannelok()">确定</el-button>
          <!-- <el-button v-if="visiblenum == 2" type="primary" @click="amend()">确定</el-button> -->
        </span>
      </el-dialog>
      <!-- 修改机构 -->
      <el-dialog v-dialogDrag title="修改机构" :visible.sync="visible1" width="30%" :close-on-click-modal = "false">
        <el-form
          :model="updateData"
          status-icon
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item :required="true" label="机构类别" >
            <el-select class="select-input" v-model="updateData.category" placeholder="请选择" >
              <el-option keys="1" label="平台" :value="1"></el-option>
              <el-option keys="2" label="第三方" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :required="true" label="机构名称">
            <el-input type="text" v-model.trim="updateData.instName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  label="支付回调地址">
            <el-input type="text" v-model.trim="updateData.payNotifyUrl" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  label="商户回调地址">
            <el-input type="text" v-model.trim="updateData.mchNotifyUrl" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item v-if="updateData.category == 2 " label="机构角色类型">
            <el-select class="select-input" v-model="updateData.role" placeholder="请选择" @change="rolename">
              <el-option keys="5" label="商户" :value="5"></el-option>
              <el-option keys="5" label="平台" :value="1"></el-option>
              <el-option keys="2" label="一级服务商" :value="2"></el-option>
              <el-option keys="3" label="二级服务商" :value="3"></el-option>
              <el-option keys="4" label="业态" :value="4"></el-option>
            </el-select>
           <div v-if="updateData.role == 1">
             <el-select style="width:75%;margin-top:10px"
              v-model.trim="value9"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              @change="pintaichange">
              <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
           </div>
           
            <div v-if="updateData.role != 1" class="listinput">
              <!-- <el-input type="text" style="margin-top:10px" :placeholder="updateData.rolename" v-model="keywords" @keyup.enter.native="getSelects()">{{keywords}}</el-input>
              <div class="list" v-show="keywordsbox">
                <ul>
                  <li @click="Btnkey(value)" v-for="(value, index) in keywordsarr" :key="index" :fid="value.fid" :fname="value.fname">{{value.fname}}</li>
                </ul>
              </div> -->
              <el-autocomplete
              style="margin-top:10px"
                v-if="updateData.role!= 1"
                class="inline-input"
                v-model.trim="value11"
                :fetch-suggestions="querySearch1"
                placeholder="请输入内容"
                @select="handleSelect"
              ></el-autocomplete>
            </div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible1 = false">取消</el-button>
          <el-button type="primary" @click="amend()">确定</el-button>
        </span>
      </el-dialog>
      <!-- 开通限额 -->
      <el-dialog v-dialogDrag title="开通限额" :visible.sync="visible2" width="40%" :close-on-click-modal = "false">
         <el-form
          :model="limit"
          status-icon
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item :required="true" label="限额比例">
                <el-input type="text" style="width:80%;" v-model.trim="limit.limitval" autocomplete="off">{{limit.limitval}}</el-input><span>‰</span>
                <div style="margin-top:10px">限额金额*<span style="color:#2E71D9;">限额比例</span>=充值金额</div>
          </el-form-item>
        </el-form>
         <span slot="footer" class="dialog-footer">
        <el-button @click="visible2 = false">取消</el-button>
        <!-- @click="visible = false" -->
        <el-button type="primary" @click="openlimit">确定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { channellist, addchannel, getSelect, channelupdate, deleteAgency, getUserSelect, updateAgency,setLimitInst } from "@/api/api";
export default {
  name: "baseform",
  data: function() {
    return {
      cur_page: 1,
      cur_size: 10,
      total1: 0,
      multipleSelection: [],
      channellistarr:[],
      pageCount:"",
      visible: false,
      visible1: false,
      visible2: false,
      limit:{
        limitval:''
      },
      isDisable: false,
      // visiblenum: 1,
      keywords:"",
      keywordsbox: false,
      keywordsarr:[],
      restaurants: [],
      restaurants1: [],//修改的模糊查询
      loading: true,
      list: [],
      // BDarr:[{'value':'123'},{'value':'456'},{'value':'789'}],
      states:"",
      options4:[],
      storesinfo:{
        stardate:"",
        enddate:"",
        channelno:""
      },
      addchannel:{
        category:"1",
        role:"5",
        rolename:"商户名称",
        instName:"",
        mchNotifyUrl:"",
        payNotifyUrl:"",
        fname:"",
        fid:"",
        authority:"",
      },
      value9: [],
      value10:'',
      value11:'',
      updateData:{
        id:'',
        category:"",
        role:"",
        rolename:"",
        instName:"",
        mchNotifyUrl:"",
        payNotifyUrl:"",
        fname:"",
        fid:"",
        authority:"",
      },
      instNo:''
    };
  },
  created() {
    this.channellist()
  },
  mounted() {
  
  },
  methods: {
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
        getUserSelect({ //商户模糊查询
          roleId: this.addchannel.role,
          roleId: this.addchannel.role,
          keywords: this.value10
        }).then(res => {
          console.log(res.data)
          if(res.code == 200){
            this.restaurants = []
            for(var i=0;i<res.data.length;i++){
              this.restaurants.push({'value':res.data[i].fname,'id':res.data[i].fid})
            }
            let results = queryString
              ? this.restaurants.filter(this.createFilter(queryString))
              : this.restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          }
        })
      },
      querySearch1(queryString, cb) {
        var restaurants = this.restaurants1;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
        getUserSelect({ //商户模糊查询
          roleId: this.updateData.role,
          roleId: this.updateData.role,
          keywords: this.value11
        }).then(res => {
          console.log(res.data)
          if(res.code == 200){
            this.restaurants1 = []
            for(var i=0;i<res.data.length;i++){
              this.restaurants1.push({'value':res.data[i].fname,'id':res.data[i].fid})
            }
            let results = queryString
              ? this.restaurants1.filter(this.createFilter(queryString))
              : this.restaurants1;
            // 调用 callback 返回建议列表的数据
            cb(results);
          }
        })
      },
       createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
        };
      },
       handleSelect(item) {
        console.log(item);
        this.addchannel.fname = item.value
        this.addchannel.fid = item.id 
        this.updateData.fname = item.value
        this.updateData.fid = item.id 
      },
    onSubmit() {
      this.$message.success("提交成功！");
    },
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("?")[0]),
        h("br"),
        h("span", {}, column.label.split("?")[1])
      ]);
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.channellist()
       this.$nextTick(() => {
         document.querySelectorAll('.content')[0].scrollTop = '0'
      });
    },
     // 分页数量
    sizechange(val){
      this.cur_size = val
      this.channellist()
       
       this.$nextTick(() => {
         document.querySelectorAll('.content')[0].scrollTop = '0'
      });
       
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 机构列表
    channellist(){
      this.isDisable = true
       channellist({
          page: this.cur_page,
          size: this.cur_size,
          startTime: this.storesinfo.stardate,
          endTime: this.storesinfo.enddate,
          keywords: this.storesinfo.channelno
        }).then(res => {
          console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else{
            this.isDisable = false
            this.loading = false
            this.channellistarr = res.data
            this.pageCount = res.pageInfo.pageCount
            this.total1 = res.pageInfo.recordCount
          }
        });
    },
    // 搜索
    soso(){
      this.cur_page = 1
      this.channellist()
    },
    // 重置
    reset(){
      this.storesinfo.stardate = ''
      this.storesinfo.enddate = ''
      this.storesinfo.channelno = ''
    },
    // 刷新
    refresh (){
      // location.reload()
      // this.$router.replace({
      //   path: '/refresh',
      //   query: {
      //     t: Date.now()
      //   }
      // })
      this.loading = true
      this.channellist()
    },
    // 角色显示input
    rolename(val){
      console.log(val)
      this.value9 = []
      this.value10 = ''
      this.value11 = ''
      this.restaurants1 = []
      this.restaurants = []
      console.log(this.value9)
      // this.addchannel.role = ''
      // this.addchannel.authority = ''
      if(val == 1 || val == 2){
        this.addchannel.rolename = '商户名称'
        this.refercode = 5
      }else if(val == 3 ){
        this.addchannel.rolename = '服务商名称'
        this.refercode = 3
      }else if(val ==4){
        this.addchannel.rolename = '服务商名称'
        this.refercode = 4
        }else if(val == 5){
         this.addchannel.rolename = '业务员名称'
         this.refercode = 5
      }
      
    },
    // 角色机构类型查询
    getSelects(val){
      this.keywordsbox = true
       getSelect({
         roleId:this.refercode,
         keywords: this.keywords
        }).then(res => {
          // console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else{
            this.keywordsarr = res.data
          }
        });
    },
    // 选择机构类型
    Btnkey(val){
      this.keywordsbox = false
      this.addchannel.fname = val.fname
      this.addchannel.fid = val.fid
      this.keywords = val.fname
      console.log(this.addchannel.fid)
    },
    // 新增按钮
    add(){
      this.visible = true
      this.addchannel.category = '',
      this.addchannel.instName = '',
      this.addchannel.payNotifyUrl = '',
      this.addchannel.mchNotifyUrl = '',
      this.addchannel.fname = '',
      this.addchannel.fid = '',
      this.addchannel.role = '',
      this.addchannel.authority = ''
      this.value10 = ''
      // this.addchannel.rolename = '商户名称'
    },
    // 确定新增机构
    addchannelok(){
      console.log(this.addchannel.category)
      if(this.addchannel.category == 1){
        this.addchannel.role = 1 //当新增时 机构类别选择收呗时 机构类型默认为 平台
        this.addchannel.authority = ''
      }
       addchannel({
         type: this.addchannel.category,
         instName: this.addchannel.instName,
         payNotifyUrl: this.addchannel.payNotifyUrl,
         mchNotifyUrl: this.addchannel.mchNotifyUrl,
         fname: this.addchannel.fname,
         fid: this.addchannel.fid,
         instType: this.addchannel.role,
         authority: this.addchannel.authority
        }).then(res => {
          console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else if(res.code == 200){
            this.addchannel.category = '',
            this.addchannel.instName = '',
            this.addchannel.payNotifyUrl = '',
            this.addchannel.mchNotifyUrl = '',
            this.addchannel.fname = '',
            this.addchannel.fid = '',
            this.addchannel.role = '',
            this.addchannel.authority = ''
            this.restaurants = []
            this.$message({
              message: res.message,
              type: 'success'
            });
            this.visible = false
            this.refresh()
          }else{
             this.$message.error(res.message);
          }
        });
    },
    // 详情
    alter(val){
      console.log(val)
      this.visible1 = true
      this.updateData.id = val.id
      this.updateData.category = val.type
      this.updateData.instName = val.instName
      this.updateData.payNotifyUrl = val.payNotifyUrl
      this.updateData.mchNotifyUrl = val.mchNotifyUrl
      this.updateData.role = val.instType
      this.updateData.fname = val.fname
      this.updateData.fid = val.fid
      if(val.fname !== ''){
        this.value11 = val.fname
      }else{
        this.value9 = val.authority.split(',')
      }
      // this.visiblenum = 2
      // this.updateData.category = val.type
      // this.addchannel.role = val.instType
      // this.addchannel.instName = val.instName
      // this.addchannel.mchNotifyUrl = val.mchNotifyUrl
      // this.addchannel.payNotifyUrl = val.payNotifyUrl
      // this.addchannel.fname = val.fname
      // this.addchannel.fid = val.fid
      // this.keywords = val.fname
      // this.value9 = val.authority.split(',')
    },
    //修改提交
    amend(){
      var aaa = ''
      if(this.value9.join !== ''){
        aaa = this.value9.join(',')
      }else {
        aaa = ''
      }
      
      console.log(aaa)
      if(this.updateData.role == 1){
        this.value11 = ''
      }
      if(this.updateData.role !== 1){
        this.value9 = []
      }
      // var aaa = this.value9.join(',')
      updateAgency({
        type:this.updateData.category,
        instName: this.updateData.instName,
        payNotifyUrl: this.updateData.payNotifyUrl,
        mchNotifyUrl: this.updateData.mchNotifyUrl,
        instType: this.updateData.role,
        fname: this.value11,
        authority: aaa,
        fid: this.updateData.fid,
      },this.updateData.id).then(res => {
        if(res.code == 405){
          sessionStorage. removeItem('token')
          this.$router.push('/login');
        }else if(res.code == 200){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.visible1 = false
          this.restaurants1 = []
          this.channellist()
        }else{
          this.$message.error(res.message);
        }
      })
    },
    //删除机构
    deleteAgency(val){
      this.$confirm(`是否确定注销该机构号？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      }).then(() => {
          deleteAgency({},val.id).then(res =>{
            if(res.code == 405){
              sessionStorage. removeItem('token')
              this.$router.push('/login');
            }else{
              this.$message({
                message: '注销成功',
                type: 'success'
              });
              this.channellist()
            }
          })
      })
      .catch(() => {
          this.$message({
              type: "info",
              message: "已取消"
          });
      });
    },
    // 平台
    remoteMethod(query) {
      console.log(query)
      getSelect({
         roleId:'5',
         keywords: query
        }).then(res => {
          // console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else{
            this.list = res.data.map(item => {
              return { value: item.fid, label: item.fname };
            });
            console.log(this.list)
          }
        });
      if (query !== '') {
        setTimeout(() => {
          this.options4 = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 300);
      } else {
        this.options4 = [];
      }
    },
    //
    pintaichange(e){
      this.addchannel.authority = e.join(',');
      console.log(this.addchannel.authority)
      
    },
    // 打开开通限额
    limitbtn(e){
      this.visible2 = true
      console.log(e)
      this.instNo = e.instNo
      this.limit.limitval = e.limitRatio/10
    },
    // 开通限额
    openlimit(){
       setLimitInst({
         instNo:this.instNo,
         limitType:1,
         limitRatio: (this.limit.limitval*10).toFixed(0)
        }).then(res => {
          console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else if(res.code == 200){
            this.$message({
                message: '开通成功',
                type: 'success'
              });
              this.visible2 = false;
          }else{
             this.$message.error(res.message);
          }
        });
    },
    // 跳机构详情
    jumpchanneldetails(e){
       this.$router.push({
            path: "/channeldetails",
        });
      sessionStorage.setItem('institutionsid',e.id);
    }
    
    



  },
 
};
</script>
<style scoped lang="less">
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #374459;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
}
.statistical > .statisticalitem {
  width: 50%;
  text-align: center;
  line-height: 200%;
}
.tableBox {
  margin-top: 20px;
}

.red {
  color: #f9607d;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
.listinput{
  position: relative;
}
.list{
  width: 100%;
   position:absolute;
  ul{
    width: 70%;
    background: #fff;
    border: 1px solid #DCDFE5;
    padding: 10px;
    box-sizing: border-box;
    max-height: 225px;
    overflow: auto;
    li{
      width: 100%;
      list-style:none;
      border-bottom: 1px solid #DCDFE5;
      &:hover{
        background: #589EF8;
        color: #fff;
      }
    }
    
  }
}
.select-input{
  width: 100%;
}
.inline-input{
  width: 100%;
}
</style>